<template>
  <div>
    <el-button type="primary" size="small"  @click="addUser">
      新增用户
    </el-button>
    <el-table
      stripe
      border
      :data="userData"
      style="width: 100%;margin-top: 15px"
      ref = 'userTable'
      @selection-change="handlerSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="序号">
        <template v-slot="scope">
          <span>{{(pageParams.pageNum - 1) * pageParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="userid"
        label="用户id">
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名称">
      </el-table-column>
      <el-table-column
        prop="password"
        label="用户密码">
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="用户昵称">
      </el-table-column>
      <el-table-column
        prop="identity"
        label="用户身份"
        :filters="[{ text: '供货商', value: '供货商' }, { text: '借卖方', value: '借卖方' },{ text: '买家', value: '买家' }]"
        :filter-method="filterTag"
      >
        <template v-slot="scope">
          <el-tag
            :type="scope.row.identity === '供货商' ? 'success':scope.row.identity === '借卖方'?'warning':'primary' "
            disable-transitions>
            {{ scope.row.identity}}
          </el-tag>
        </template>

      </el-table-column>
      <el-table-column
        prop="options"
        label="操作"
        width="150px"
      >
        <template v-slot="scope">
          <el-button
            size="mini"
            @click="deleteOne(scope.$index,scope.row)">
            删除
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="change(scope.$index,scope.row)">
            修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div v-if="userData.length!== 0" class="pagination" style="margin-top:20px;text-align:center;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,prev, sizes, pager, next,jumper"
        :current-page.sync="pageParams.pageNum"
        :page-size="pageParams.pageSize"
        :page-sizes="[10,20,50,100]"
        :total="userData.length">
      </el-pagination>
    </div>
    <el-button size="small" style="margin-top: 10px"
               type="primary"
               @click = "deleteMany"
               :disabled="this.selectItems.length===0">
      批量删除
    </el-button>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
      <el-form :model="userForm" :rules="rules" ref="userForm" label-width="80px">
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="userForm.username" auto-complete="off" placeholder="1~10位字母，数字或者下划线构成"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="userForm.nickname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input v-model="userForm.password" auto-complete="off" placeholder="1~10位字母，数字或者下划线构成"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="userForm.phone" placeholder="请输入11位手机号"></el-input>
        </el-form-item>

        <el-form-item label="身份" prop="identity">
          <el-select v-model="userForm.identity">
            <el-option label="供货商" value="供货商"></el-option>
            <el-option label="借卖方" value="借卖方"></el-option>
            <el-option label="买家" value="买家"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "userInformation",
  data(){
    var checkNickname = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('昵称不能为空'));
      }
      callback();
    };
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      }
      let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if (!phoneReg.test(value)) {
        callback(new Error('请输入正确格式手机号'));
      }
      callback();
    };
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'));
      }
      let usernameReg = /^\w{1,10}$/;
      if (!usernameReg.test(value)) {
        callback(new Error('请输入正确格式用户名'));
      }
      callback();
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      }
      let passReg = /^\w{1,10}$/;
      if (!passReg.test(value)) {
        callback(new Error('请输入正确格式密码'));
      }
      callback();
    };
    return{
      //user: JSON.parse(window.sessionStorage.getItem("user"))
      userData: [{
        userid:'1',
        username:'ABCDEF',
        nickname:'adcdef',
        password:'123456',
        phone:'18099999999',
        identity:'供货商'
      },{
        userid:'2',
        username:'ABCDEF',
        nickname:'adcdef',
        password:'123456',
        phone:'18099999999',
        identity:'借卖方'
      },
        {
          userid:'3',
          username:'ABCDEF',
          nickname:'adcdef',
          password:'123456',
          phone:'18099999999',
          identity:'买家'
        }],
      pageParams: {
        pageNum: 1,
        pageSize: 10,
      },
      selectItems:[],
      dialogFormVisible: false,
      userForm: {},
      rowIndex:null,
      dialogTitle: '新增用户',
      rules: {
        phone: [
          {validator: checkPhone, trigger: 'blur'}
        ],
        username: [
          {validator: checkUsername, trigger: 'blur'}
        ],
        nickname: [
          {validator:checkNickname,trigger:'blur'}
        ],
        password: [
          {validator: validatePass, trigger: 'blur'}
        ]},
        identity: [
          {required:true,message:'请选择身份',trigger:'blur'}]
    }
  },
  /*
    mounted(){
     this.initWare;
     this.initWareData;
    },
  * */

  methods:
    {
      initUserData(){
        this.getRequest('/获取所有用户信息').then(res=>{
          if(res)
          {
            //this.wareData = res
          }
        })
      },
      filterTag(value, row) {
        return row.identity === value;
      },
      addUser(){
        this.dialogTitle = '新增用户';
        this.userForm = {};
        this.dialogFormVisible = true;
      },
      deleteOne(index){
        this.$confirm('此操作将永久删除用户, 是否执行?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //发送删除请求,传递用户id，仓库id
          let data = {
            userid:'user.id',
            wareid:'warehouse.id'}
          /*this.putRequest('/仓库商品上架请求',data).then(res=>{
          if(res)
          { }
        })
          * */
          this.userData.splice(index,1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      change(index,row)
      {
        this.dialogTitle = '修改用户信息';
        // 将数据的index传递过来用于实现数据的回显
        this.userForm = row;
        // 设置对话框的可见
        this.dialogFormVisible = true;
        this.rowIndex=index;

      },
      handlerSelectionChange(val){
        this.selectItems = val;
        console.log(val);
      },
      // 弹窗肯定
      submit() {
        this.$refs.userForm.validate((valid)=>{
          if(valid)
          {
            if (this.dialogTitle === '修改用户信息') {
              this.userData.splice(this.rowIndex,1, this.userForm);
              this.dialogFormVisible = false;
              return;
            }
            this.userData.splice(0, 0, this.userForm);
            this.dialogFormVisible = false;
          }else {
            this.$message.error('请按要求输入数据');
            return false;
          }
        })

      },
      deleteMany()
      {
        this.$confirm('确认批量上架?', '批量上架操作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          //发送批量上架请求,传递用户id，仓库id，商品批量id
          let ids='?';
          this.selectItems.forEach(item=>{
            ids+='ids='+item.number+'&';
          })
          let data = {
            userid:'user.id',
            wareid:'warehouse.id',
          }
          /*this.putRequest('/仓库商品上架请求',data,ids).then(res=>{
          if(res)
          {
              row.status = '已上架';
              this.$message({
              type: 'success',
              message: '上架成功!'
          }
        })
          * */
            this.$message({
              type: 'success',
              message: '批量删除成功!'
            });
          //每次选择后清空
          this.$refs.userTable.clearSelection();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消批量删除'
          });
        });
      },
      handleSizeChange(val) {
        this.pageParams.pageNum = 1;
        this.pageParams.pageSize = val;
      },

      handleCurrentChange(val) {
        this.pageParams.pageNum = val;
      }
    }
}
</script>

<style scoped>

</style>
